<template>
  <div id="shouye">
    <!-- <div id="popup" class="ol-popup" v-drag v-show="popxy" >
      <div style="text-align: center;margin-top: -10px">{{popdata.area}}-{{popdata.position_name}}
           <a href="#" @click="closePop" class="popx">x</a>
      </div>
      <div class="media">
        <div class="media-body">
          <table class="poptable">
            <tbody>
            <tr>
              <th width="25%">空气质量:</th>
              <td colspan="1" >{{popdata.quality}}</td>
              <th>AQI:</th>
              <td colspan="1"><div id="aqi">{{popdata.aqi}}</div></td>
            </tr>
            <tr>
              <th width="25%">PM2.5/1h:</th>
              <td colspan="1" ><div id="pm2_5">{{popdata.pm2_5}}</div></td>
              <th>PM10/1h:</th>
              <td colspan="1"><div id="pm10">{{popdata.pm10}}</div></td>
            </tr>
            <tr>
              <th >CO/1h</th>
              <td colspan="1">{{popdata.co}}</td>
              <th>NO2/1h</th>
              <td colspan="1">{{popdata.no2}}</td>
            </tr>
            <tr>
              <th>O3/1h:</th>
              <td colspan="1">{{popdata.o3}}</td>
              <th>SO2/1h:</th>
              <td colspan="1">{{popdata.so2}}</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div> -->
    <div id="popupjc" class="ol-popup" v-show="popxy" v-drag style="width:360px">
      <a href="#" @click="closePop" class="popx">x</a>
      <div class="media">
        <div class="media-body">
          <table class="poptable">
            <tbody>
              <tr>
                <th>所在地区</th>
                <td>{{ jiancedata.地区 }}</td>
                <th>站点名称</th>
                <td>{{ jiancedata.站点名称 }}</td>
              </tr>
              <tr>
                <th>SO2年均浓度</th>
                <td>{{ jiancedata.SO2年均浓度 }}</td>
                <th>占标率</th>
                <td>{{ jiancedata.占标率 }}</td>
              </tr>
              <tr>
                <th>NO2年均浓度</th>
                <td>{{ jiancedata.NO2年均浓度 }}</td>
                <th>占标率</th>
                <td>{{ jiancedata.占标率_1 }}</td>
              </tr>
              <tr>
                <th>PM10年均浓度</th>
                <td>{{ jiancedata.PM10年均浓度 }}</td>
                <th>占标率</th>
                <td>{{ jiancedata.占标率_2 }}</td>
              </tr>
              <tr>
                <th>PM2.5年均浓度</th>
                <td>{{ jiancedata.PM25年均浓度 }}</td>
                <th>占标率</th>
                <td>{{ jiancedata.占标率_3 }}</td>
              </tr>
              <tr>
                <th>CO日平均第95百分位数</th>
                <td>{{ jiancedata.CO日平均第95百分位数 }}</td>
                <th>占标率</th>
                <td>{{ jiancedata.占标率_4 }}</td>
              </tr>
              <tr>
                <th>8小时最大平均第90百分位数</th>
                <td>{{ jiancedata.O3日8小时最大平均第90百分位数 }}</td>
                <th>占标率</th>
                <td>{{ jiancedata.占标率_5 }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div id="top">
         <div class="mutiDiv" style="margin-left: 10%;">
            <div class="title"><span>环境管控单元总面积</span></div>
            <div class="content">
              <span class="dyNumber">{{this.theAllAreas.toFixed(2) > 7.06? 7.06 :this.theAllAreas.toFixed(2) }}</span>
              <span class="units">万平方千米</span>
            </div>
         </div>
         <div class="mutiDiv" style="margin-left: 30%;">
           <div class="title"><span>环境管控单元总数</span></div>
           <div class="content">
             <span class="dyNumber">{{ this.theAllCounts }}</span>
             <span class="units">个</span>
           </div>
         </div>
<!--         <div class="mutiDiv" style="margin-left: 32.5%;">-->
<!--           <div class="title"><span>共享文件个数</span></div>-->
<!--           <div class="content">-->
<!--             <span class="dyNumber">33333333</span>-->
<!--             <span class="units">个</span>-->
<!--           </div>-->
<!--         </div>-->
<!--         <div class="mutiDiv" style="margin-left: 40%;">-->
<!--           <div class="title"><span>系统运行情况</span></div>-->
<!--           <div class="content">-->
<!--             <span class="dyNumber">良好</span>-->
<!--&lt;!&ndash;             <span class="units">平方米</span>&ndash;&gt;-->
<!--           </div>-->
<!--         </div>-->
         <div class="mutiDiv" style="margin-left: 50%;">
           <div class="title"><span>成果申报总数</span></div>
           <div class="content">
             <span class="dyNumber">{{ this.theTotalNumberOfDeclarations }}</span>
             <span class="units">个</span>
           </div>
         </div>
         <div class="mutiDiv" style="margin-left: 70%;">
           <div class="title"><span>最近填报时间</span></div>
           <div class="content">
             <span class="dyNumber">{{ this.theCurrentTime  }}</span>
<!--             <span class="units">平方米</span>-->
           </div>
         </div>
      <template>
        <el-select size="medium"
                   v-model="value"
                   @change="changeHandle(value)"
                   placeholder="请选择">
          <el-option
            size="medium"
            v-for="(item,index) in theOptions"
            v-if="item.isShow"
            :key="index"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>
      </template>
     </div>
    <div id="centerLeft">
         <div class="title2">
           <span style="position:absolute;margin-left: 40px;font-size: 16px;color:#4b4e53;font-weight: bold;padding: 20px">图斑面积与数量统计</span>

         </div>
      <div class="content2">
          <div class="contentToLeft">
              <div id="pieNumberLeft">
              </div>
              <div id="wordsLeft">
                   <h2>{{keyWord}}环境管控单元面积</h2>
                <span style="margin-top: 40px;margin-left:20px;display: block">优先保护单元面积占比-----<span style="color: red">{{yxAreaScale}}%</span></span>
                <span style="margin-top: 20px;margin-left:20px;display: block">重点管控单元面积占比-----<span style="color: red">{{zdAreaScale}}%</span></span>
                <span style="margin-top: 20px;margin-left:20px;display: block">一般管控单元面积占比-----<span style="color: red">{{ybAreaScale}}%</span></span>
              </div>
          </div>
          <div class="contentToRight">
            <div id="pieNumberRight">

            </div>
            <div id="wordsRight">
              <h2>{{keyWord}}环境管控单元数量</h2>
              <span style="margin-top: 40px;margin-left:20px;display: block">优先保护单元数量占比-----<span style="color: red">{{yxCountScale}}%</span></span>
              <span style="margin-top: 20px;margin-left:20px;display: block">重点管控单元数量占比-----<span style="color: red">{{zdCountScale}}%</span></span>
              <span style="margin-top: 20px;margin-left:20px;display: block">一般管控单元数量占比-----<span style="color: red">{{ybCountScale}}%</span></span>
            </div>
          </div>
      </div>
    </div>
  <!--  <div id="centerRight">
      <div class="title2">
        <span style="position:absolute;margin-left: 40px;font-size: 16px;color:#4b4e53;font-weight: bold;padding: 20px">三线一单文件资料库</span>
      </div>
      <div class="content2">
        <ul>
          <li v-for="(item,index) in options2" :key="index"><el-link :href="item.url" :underline="false" target="view_window" style="font-size: 15px">{{ item.name }}</el-link></li>
        </ul>
      </div>
    </div>-->
    <div id="map">

    </div>
    <div style="position: absolute;top: 10.8%;right: 11.5%  ">
      <h3 style="color: black">
        <!-- 实时空气质量监管地图 -->
        兵团监测站点地图
      </h3>

    </div>
<!--    <div id="footLeft">-->
<!--      <div class="title2">-->

<!--      </div>-->
<!--      <div class="content2">-->

<!--      </div>-->
<!--    </div>-->
    <div id="footRight">
<!--      <div class="title2">-->
<!--        <span style="position:absolute;margin-left: 40px;font-size: 16px;color:#4b4e53;font-weight: bold;padding: 20px">环境管控单元分区统计</span>-->
<!--        <template>-->
<!--          <el-select size="medium"-->
<!--                     multiple-->
<!--                     collapse-tags-->
<!--                     v-model="valueList"-->
<!--                     placeholder="请选择"-->
<!--                     @change="handleSelect(valueList)"-->
<!--                    >-->
<!--            <el-option-->
<!--              v-for="item in options"-->
<!--              v-if="item.value!=='全兵团'"-->
<!--              :key="item.value"-->
<!--              :label="item.label"-->
<!--              :value="item.value">-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </template>-->
<!--        <template>-->
<!--          <el-button size="medium" round @click="dataContrast" type="goon" style="margin-right: 20%;position: absolute">数据对比</el-button>-->
<!--        </template>-->
<!--      </div>-->
      <div v-show="exchangePie " id="piefooter" class="content2">

      </div>
      <div v-show="!exchangePie" id="piefooterTo" class="content2" >

      </div>
    </div>

  </div>
</template>

<script>
import echarts from "echarts";
import {createNamespacedHelpers} from 'vuex'
import download from "@/assets/img/download.png";
import exchange from "@/assets/img/exchange.png";
const {mapState,mapGetters} = createNamespacedHelpers('dirmanage')
import "../../assets/css/ol1.css";
import "../../assets/css/ol2.css";
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import * as control from 'ol/control';
import Point  from 'ol/geom/Point';
import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';
import Style from 'ol/style/Style';
import Stroke from 'ol/style/Stroke'
import Fill from 'ol/style/Fill';
import Overlay from 'ol/Overlay';
import Feature from 'ol/Feature';
import Text from 'ol/style/Text';
import Icon from 'ol/style/Icon';
import Circle from 'ol/geom/Circle';
import { Logo, TileSuperMapRest,QueryByDistanceParameters,QueryService } from '@supermap/iclient-ol';
import * as olExtent from 'ol/extent';
import GeoJSON from 'ol/format/GeoJSON';
import WMTS from 'ol/source/WMTS';
import WMTSTileGrid from 'ol/tilegrid/WMTS';
import * as olProj from 'ol/proj';
import { fromExtent } from 'ol/geom/Polygon';
import jc0 from "@/assets/img/jcpm/jc0.png";
var map, popO;
var createShiStyle = function(feature) {
  return new Style({
    text: new Text({
      textAlign: 'center',
      textBaseline: 'bottom',
      font: 'normal 10px 微软雅黑',
      text: feature.get('name'),
      padding: [1, 3, 0, 3],
      backgroundFill: new Fill({
        color: 'rgba(0,153,255,0.7)'
      }),
      fill: new Fill({
        color: '#ffffff'
      }),
    })
  });
};
var createJianceStyle = function(feature) {
  return new Style({
    image: new Icon({
      //anchor: [0.5, 1],
      snapToPixel:false,
      src: jc0
    }),
  /*  text: new Text({
      textAlign: 'center',
      textBaseline: 'bottom',
      font: 'normal 10px 微软雅黑',
      text: feature.get('name'),
      offsetY:23,
      backgroundFill: new Fill({
        color: 'rgba(120,153,255,0.7)'
      }),
      fill: new Fill({
        color: '#ffffff'
      }),
    })*/
  });
};
var createJianceStyle2 = function(feature) {
  return new Style({
    text: new Text({
        textAlign: 'center',
        textBaseline: 'bottom',
        font: 'normal 10px 微软雅黑',
        text: feature.get('name'),
        offsetY:23,
        backgroundFill: new Fill({
          color: 'rgba(120,153,255,0.7)'
        }),
        fill: new Fill({
          color: '#ffffff'
        }),
      })
  });
};
    var projection = olProj.get('EPSG:4326');
		var projectionExtent = projection.getExtent();
		var resolutions = new Array(19);
		var matrixIds = new Array(19);
		for(var z = 0; z < 19; z++) {
			// generate resolutions and matrixIds arrays for this WMTS
			//resolutions[z] = size / Math.pow(2, z);
			matrixIds[z] = z;
		}
		resolutions = [1.40625, 0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 0.0006866455078125, 0.00034332275390625, 0.000171661376953125,
			0.0000858306884765625, 0.00004291534423828125, 0.000021457672119140625, 0.000010728836059570312, 0.000005364418029785156, 0.000002682209014892578, 0.000001341104507446289
		];
export default {
  name: "shouye",
  data() {
    return {
      // tdtslurl:"http://localhost:8090/iserver/services/map-tianditu/rest/maps/矢量底图_经纬度",
      //   tdtbqurl:"http://localhost:8090/iserver/services/map-tianditu/rest/maps/矢量中文注记_经纬度",
      //VPN
      tdtslurl:"https://10.226.77.11:8809/iserver/services/map-tianditu/rest/maps/矢量底图_经纬度",
      tdtbqurl:"https://10.226.77.11:8809/iserver/services/map-tianditu/rest/maps/矢量中文注记_经纬度",
      jianceurl: "https://10.226.77.11/iserver/services/map-gexinghua/rest/maps/监测站点",
      //政务办59
      //  tdtslurl:"https://59.223.239.59:443/super/services/map-tianditu/rest/maps/矢量底图_经纬度",
      //  tdtbqurl:"https://59.223.239.59:443/super/services/map-tianditu/rest/maps/矢量中文注记_经纬度",
      //  jianceurl: "https://59.223.239.59:8807/iserver/services/map-gexinghua/rest/maps/监测站点",
      //  //政务办10
      //  tdtslurl:"https://10.222.77.11:443/super/services/map-tianditu/rest/maps/矢量底图_经纬度",
      //  tdtbqurl:"https://10.222.77.11:443/super/services/map-tianditu/rest/maps/矢量中文注记_经纬度",
      //  jianceurl: "https://10.222.77.11:8807/iserver/services/map-gexinghua/rest/maps/监测站点",
  /*  tdtslurl:"http://10.10.11.240:15361/iserver/services/map-tianditu/rest/maps/矢量底图_经纬度",
    tdtbqurl:"http://10.10.11.240:15361/iserver/services/map-tianditu/rest/maps/矢量中文注记_经纬度",*/
      jcdata:[],
      popxy:false,
      popdata:{
        quality:'轻度污染',
        pm2_5:'22',
        o3:'32',
        co:'111',
        pm10:'33',
        no2:'42',
        so2:'30',
        aqi:'120',
        area:"乌鲁木齐",
        position_name:'市环保局'
      },
    /*  options2:[
        {
          url:'http://localhost:8081/“三线一单”成果数据规范.pdf',
          name:"“三线一单”成果数据规范.pdf",
        },
        {
          url:'http://localhost:8081/关于印发《“三线一单”图件制图规范（试行）》的通知.pdf',
          name:"关于印发《“三线一单”图件制图规范（试行）》的通知.pdf",
        },
        {
          url:'http://localhost:8081/国家生态保护红线划定技术导则.pdf',
          name:"国家生态保护红线划定技术导则.pdf",
        },
        {
          url:'http://localhost:8081/三线一单编制技术要求.pdf',
          name:"“三线一单”编制技术要求（试行）.pdf",
        }, {
          url:'http://localhost:8081/生态环境部—关于印发《生态环境准入清单编制要点（试行）的通知.pdf',
          name:"生态环境部—关于印发《生态环境准入清单编制要点（试行）的通知.pdf",
        }
      ],*/
      options: [{
        value: '新疆生产建设兵团',
        label: '新疆生产建设兵团'
      },{
        value: '第一师',
        label: '第一师'
      }, {
        value: '第二师',
        label: '第二师'
      }, {
        value: '第三师',
        label: '第三师'
      }, {
        value: '第四师',
        label: '第四师'
      }, {
        value: '第五师',
        label: '第五师'
      }, {
        value: '第六师',
        label: '第六师'
      }, {
        value: '第七师',
        label: '第七师'
      }, {
        value: '第八师',
        label: '第八师'
      }, {
        value: '第九师',
        label: '第九师'
      }, {
        value: '第十师',
        label: '第十师'
      }, {
        value: '第十一师',
        label: '第十一师'
      }, {
        value: '第十二师',
        label: '第十二师'
      }, {
        value: '第十三师',
        label: '第十三师'
      }, {
        value: '第十四师',
        label: '第十四师'
      }
      ],
      keyWord:"新疆生产建设兵团",
      value: '',
      valueList:[],
      exchangePie:true,
      yxAreaScale:"",
      zdAreaScale:"",
      ybAreaScale:"",
      yxCountScale:"",
      zdCountScale:"",
      ybCountScale:"",
      myChart4:'',
      cityId:'',
      jiancedata: {
        地区: '',
        站点名称: '',
        SO2年均浓度: '',
        占标率: "",
        NO2年均浓度: '',
        占标率_1: '',
        PM10年均浓度: '',
        占标率_2: "",
        PM25年均浓度: '',
        占标率_3: "",
        CO日平均第95百分位数: '',
        占标率_4: "",
        O3日8小时最大平均第90百分位数: '',
        占标率_5: "",
        环境空气质量判定: ''
      },
    }
  },
  async created() {
    console.log(window.sessionStorage)
    console.log(window.sessionStorage.getItem('shiName'))
    this.value = window.sessionStorage.getItem('shiName')
    console.log(this.value)
    this.cityId =  window.sessionStorage.getItem('cityId')
    await  this.$store.dispatch('dirmanage/getfindAllByDivision')
    // await  this.$store.dispatch('dirmanage/getUnitAreaAndCount')
    // await  this.$store.dispatch('dirmanage/getDivisionUnitCount')
    //const {data:aks}= await this.$http6.get('/administrative?postStr={"searchWord":"北京","searchType":"1","needSubInfo":"false","needAll":"false","needPre":"true"}&tk=8a243ae9560f31b213caed2889958c5c')

    await  this.changeHandle(this.value)
    this.$store.dispatch('dirmanage/getAchievementCountAndTime',{id:this.cityId})
    /*const {data:aks}= await this.$http5.get('/querys/aqi_details.json',{ params:{ city:'akesudiqu',token:'5j1znBVAsnSf5xQyNQyq' } })
    allData=allData.concat(aks)
    const {data:shz}= await this.$http5.get('/querys/aqi_details.json',{ params:{ city:'shihezi',token:'5j1znBVAsnSf5xQyNQyq' } })
    allData=allData.concat(shz)
    const {data:wjq}= await this.$http5.get('/querys/aqi_details.json',{ params:{ city:'wujiaqu',token:'5j1znBVAsnSf5xQyNQyq' } })
    allData=allData.concat(wjq)
    const {data:cj}= await this.$http5.get('/querys/aqi_details.json',{ params:{ city:'changjizhou',token:'5j1znBVAsnSf5xQyNQyq' } })
    allData=allData.concat(cj)
    const {data:ks}= await this.$http5.get('/querys/aqi_details.json',{ params:{ city:'kashediqu',token:'5j1znBVAsnSf5xQyNQyq' } })
    allData=allData.concat(ks)
    const {data:hm}= await this.$http5.get('/querys/aqi_details.json',{ params:{ city:'hamidiqu',token:'5j1znBVAsnSf5xQyNQyq' } })
    allData=allData.concat(hm)
    const {data:kelamayi}= await this.$http5.get('/querys/aqi_details.json',{ params:{ city:'kelamayi',token:'5j1znBVAsnSf5xQyNQyq' } })
    allData=allData.concat(kelamayi)
    const {data:kuerle}= await this.$http5.get('/querys/aqi_details.json',{ params:{ city:'kuerle',token:'5j1znBVAsnSf5xQyNQyq' } })
    allData=allData.concat(kuerle)
    const {data:tachengdiqu}= await this.$http5.get('/querys/aqi_details.json',{ params:{ city:'tachengdiqu',token:'5j1znBVAsnSf5xQyNQyq' } })
    allData=allData.concat(tachengdiqu)
    const {data:aletaidiqu}= await this.$http5.get('/querys/aqi_details.json',{ params:{ city:'aletaidiqu',token:'5j1znBVAsnSf5xQyNQyq' } })
    allData=allData.concat(aletaidiqu)
    const {data:tulufandiqu}= await this.$http5.get('/querys/aqi_details.json',{ params:{ city:'tulufandiqu',token:'5j1znBVAsnSf5xQyNQyq' } })
    allData=allData.concat(tulufandiqu)
    const {data:wulumuqi}= await this.$http5.get('/querys/aqi_details.json',{ params:{ city:'wulumuqi',token:'5j1znBVAsnSf5xQyNQyq' } })
    allData=allData.concat(wulumuqi)
    const {data:yilihasakezhou}= await this.$http5.get('/querys/aqi_details.json',{ params:{ city:'yilihasakezhou',token:'5j1znBVAsnSf5xQyNQyq' } })
    allData=allData.concat(yilihasakezhou)
    for(let i in allData){
      for(let j in this.jcdata){
        if(allData[i].area==this.jcdata[j].驻地&&allData[i].position_name==this.jcdata[j].标准名.substring(this.jcdata[j].标准名.indexOf("-")+1,this.jcdata[j].标准名.length)){
          this.jcdata[j]={...this.jcdata[j],...allData[i]}
        }
      }
    }
    console.log(this.jcdata)*/
  },
  mounted() {
     console.log('========================')
     console.log(this.theOptions);
    this.addMap();
    document.getElementsByClassName('ol-zoom-in')[0].title = '放大';
    document.getElementsByClassName('ol-zoom-out')[0].title = '缩小';
    document.getElementsByClassName('ol-full-screen-false')[0].title = '全屏';
  },
  computed:{
    ...mapGetters(['theGroupTotalCount']),
    ...mapGetters(['theGroupTotalArea']),
    ...mapGetters(['theDivisionCount']),
    ...mapGetters(['theAllCounts']),
    ...mapGetters(['theAllAreas']),
    ...mapGetters(['theTotalNumberOfDeclarations']),
    ...mapGetters(['theCurrentTime']),
    ...mapGetters(['theOptions'])
  },
  methods:{
    dataContrast(){
      console.log(this.valueList)
      if (this.valueList.length ===0 ){
        this.$message.error('请选择需要进行对比的两个或者两个以上的师级单位')
      }
      else if(this.valueList.length<2){
        const currentDw = this.valueList[0]

        this.$message.error('当前选择得师级单位是'+currentDw+',请再选择一个单位与之进行对比')
      }
      else{
        this.$message.success('this.valueList')
        this.$store.commit('dirmanage/getDivisionCountContrast', {data:this.theDivisionCount,conditions:this.valueList})
      }
    },
    async  changeHandle(val){
      console.log('val',val)
      console.log(this.theOptions)
      for (var i =0;i<this.theOptions.length;i++){
        if (this.theOptions[i].name===val){
          console.log(this.theOptions[i].id)
          this.$store.dispatch('dirmanage/getAchievementCountAndTime',{id:this.theOptions[i].id})
          break
        }
      }

      this.keyWord = val
      if (val == '新疆生产建设兵团'){
        await  this.$store.dispatch('dirmanage/getUnitAreaAndCount')
        // this.myChart4.clear()
        this.exchangePie = true
        this.drawPieTo()
      }
      else{
        await  this.$store.dispatch('dirmanage/getDivisionUnitAreaAndCount',{city:val})
        this.exchangePie = false
        this.resetDrawPieTo(val)
      }

      this.drawPie()
      },
    handleSelect(val2){
         console.log(val2)
      },
    async  resetDrawPieTo(val){
      await  this.$store.dispatch('dirmanage/getGroupUnitAreaAndCount',{city:val})

      this.myChart4 = echarts.init(document.getElementById('piefooterTo'))
      var option4 = {
        toolbox:{
          feature:{
            saveAsImage:{
              type:'png',
              icon: 'image://' + download
            },
            myTool:{ //自定义方法 配置   为了实现 饼图切换为柱状图
              show : true,
              title : '切换到兵团',
              icon :  'image://' + exchange,
              onclick:()=>{
                this.myChart4.clear()
                this.exchangePie = true
                this.drawPieTo()
              }
            },
          },
          left:'5%',


        },
        legend: {
          right:'10%'
        },
        tooltip: {},
        color:['#4DE602','#F57A7A','#F6EBAB'],
        // color:['#f6da22','#bbe2e8','#6cacde'],
        grid:{
          top:"50px",
          left:"50px",
          right:"15px",
          bottom:"50px"
        },
        title: {
          text: val + '环境管控单元图斑数量柱状图',
          left: "center",
          top: "0",
          // textAlign:'center',
          textStyle: {
            fontSize: 16
          },

        },
        dataset: {
          dimensions: ['county', '优先', '重点', '一般'],
          source: this.theDivisionCount
        },
        xAxis: {
          type: 'category',
          silent:false,
          triggerEvent: true,
          axisLabel: {
            formatter: '{value}'
          }
          // axisLabel: {interval:0,rotate:15},
        },
        yAxis: {

        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        // series: [
        //   {type: 'bar', barWidth : 20},
        //   {type: 'bar', barWidth : 20},
        //   {type: 'bar', barWidth : 20}
        // ]
        series: [

          {           label: {
              show: true
            },type: 'bar', barWidth : 20},
          {           label: {
              show: true
            },type: 'bar', barWidth : 20},
          {           label: {
              show: true
            },type: 'bar', barWidth : 20}
        ]
      };
      this.myChart4.setOption(option4)
      // myChart3.on('click', 'xAxis.category',  (params)=> {
      //   // console.log(params)
      //   console.log(params.value);
      //   this.exchangePie = false
      // });
      },
    async  drawPieTo(){
        await  this.$store.dispatch('dirmanage/getDivisionUnitCount')
        var myChart3 = echarts.init(document.getElementById('piefooter'))
        var option3 = {
          toolbox:{
            feature: {
              saveAsImage: {
                type: 'png',
                icon: 'image://' + download
              },
            },
            left:'5%',
          },
          legend: {
            right:'10%'
          },

          tooltip: {},
          color:['#4DE602','#F57A7A','#F6EBAB'],
          // color:['#f6da22','#bbe2e8','#6cacde'],
          grid:{
            top:"50px",
            left:"50px",
            right:"15px",
            bottom:"50px"
          },
            title: {
              text: '新疆生产建设兵团环境管控单元图斑数量统计图',
              left: "center",
              top: "0",
              // textAlign:'center',
              textStyle: {
                fontSize: 16
              },
            },
          dataset: {
            dimensions: ['city', '优先', '重点', '一般'],
            source: this.theDivisionCount
          },
          xAxis: {
            type: 'category',
            silent:false,
            triggerEvent: true,
            axisLabel: {
              formatter: '{value}'
            }
            // axisLabel: {interval:0,rotate:15},
          },
          yAxis: {

          },
          // Declare several bar series, each will be mapped
          // to a column of dataset.source by default.
          series: [

            {           label: {
                show: true
              },type: 'bar', barWidth : 20},
            {           label: {
                show: true
              },type: 'bar', barWidth : 20},
            {           label: {
                show: true
              },type: 'bar', barWidth : 20}
          ]
        };
        myChart3.setOption(option3)
        myChart3.on('click', 'xAxis.category',  (params)=> {
          // console.log(params)
          console.log(params.value);
          this.exchangePie = false
          this.resetDrawPieTo(params.value)
        });
      },
    drawPie(){
        console.log(this.theGroupTotalArea)
        console.log(this.theGroupTotalCount)
        let sumCount = 0
        let sumArea = 0
        for(var i=0;i<this.theGroupTotalCount.length;i++){
            sumCount = sumCount + this.theGroupTotalCount[i].value
        }
        for(var m=0;m<this.theGroupTotalArea.length;m++){
            sumArea = sumArea + this.theGroupTotalArea[m].value
        }
        for(var j=0;j<this.theGroupTotalCount.length;j++){
          if (this.theGroupTotalCount[j].name=='优先'){
             this.yxCountScale = ((this.theGroupTotalCount[j].value/sumCount)*100).toFixed(2)
          }
          else if (this.theGroupTotalCount[j].name=='重点'){
             this.zdCountScale =  ((this.theGroupTotalCount[j].value/sumCount)*100).toFixed(2)
          }
          else{
             this.ybCountScale =  ((this.theGroupTotalCount[j].value/sumCount)*100).toFixed(2)
          }
        }
        for(var n=0;n<this.theGroupTotalArea.length;n++){
          if (this.theGroupTotalArea[n].name=='优先'){
            this.yxAreaScale = ((this.theGroupTotalArea[n].value/sumArea)*100).toFixed(2)
          }
          else if (this.theGroupTotalArea[n].name=='重点'){
            this.zdAreaScale =  ((this.theGroupTotalArea[n].value/sumArea)*100).toFixed(2)
          }
          else{
            this.ybAreaScale =  ((this.theGroupTotalArea[n].value/sumArea)*100).toFixed(2)
          }
        }

        // this.ybAreaScale = 100 - this.yxAreaScale - this.zdAreaScale
        console.log(this.yxCountScale,this.zdCountScale)
       if(isNaN(this.yxCountScale)){
         this.yxCountScale=0
       }
      if(isNaN(this.zdCountScale)){
        this.zdCountScale=0
      }
      if(isNaN(this.ybCountScale)){
        this.ybCountScale=0
      }
      if(isNaN(this.yxAreaScale)){
        this.yxAreaScale=0
      }
      if(isNaN(this.zdAreaScale)){
        this.zdAreaScale=0
      }
      if(isNaN(this.ybAreaScale)){
        this.ybAreaScale=0
      }
       //  环境保护单元面积统计饼状图
        var myChart = echarts.init(document.getElementById('pieNumberLeft'))
        var option = {
          tooltip: {
            trigger: 'item',
            formatter: (params)=>{
               const item = params
               if (params.name =='优先'){
                 return `
                        优先保护单元<br/>
                        实际面积：${item.data.value}<br/>
                        面积占比：${item.percent}%<br/>
                         `
               }
               else{
                 return `
                 ${item.name}管控单元<br/>
                 实际面积：${item.data.value}<br/>
                 面积占比：${item.percent}%<br/>  `
               }
            }
          },
          color:['#4DE602','#F57A7A','#F6EBAB'],
          legend: {
            orient:'horizontal',
            left: 10,
            data: ['优先', '重点', '一般']
          },

          series: [
            {
              name: '环境管控单元面积',
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: this.theGroupTotalArea
            }
          ]
        };
        myChart.setOption(option)

       //  环境保护单元数量统计饼状图
        var myChart2 = echarts.init(document.getElementById('pieNumberRight'))
        var option2 = {
          tooltip: {
            trigger: 'item',
            // formatter: '{a} <br/>{b}: {c} {d}%'
            formatter: (params)=>{
              const item = params
              if (params.name =='优先'){
                return `
                        优先保护单元<br/>
                        实际数量：${item.data.value}<br/>
                        数量占比：${item.percent}%<br/>
                         `
              }
              else{
                return `
                 ${item.name}管控单元<br/>
                 实际数量：${item.data.value}<br/>
                 数量占比：${item.percent}%<br/>  `
              }
            }
          },
          legend: {
            orient:'horizontal',
            left: 10,
            data: ['优先', '重点', '一般']
          },
          color:['#4DE602','#F57A7A','#F6EBAB'],
          series: [
            {
              name: '环境保护单元数量',
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data:this.theGroupTotalCount
            }
          ]
        };
        myChart2.setOption(option2)

    },
    async addMap(){
      map = new Map({
        target: 'map',
        controls: control.defaults({
          attribution: false
        }),
        view: new View({
          center: [85.28838135,42.209817352],
          zoom: 4.8,
          minZoom:2,
          projection: 'EPSG:4326'
        }),
      });
      var fullScreenControl = new control.FullScreen();
      map.addControl(fullScreenControl);
      var tdtslLayer = new TileLayer({
        source: new TileSuperMapRest({
          url: this.tdtslurl,
          wrapX: false
        }),
        projection: 'EPSG:4326'
      });
      var tdtbqLayer = new TileLayer({
        source: new TileSuperMapRest({
          url: this.tdtbqurl,
          wrapX: false
        }),
        projection: 'EPSG:4326'
      });
      let webKey='b0f80d188ee3100e0327398d8afb39cd'
      // var tdtslLayer = new TileLayer({
      //   opacity: 1,
      //   source: new WMTS({
      //     url: "http://t0.tianditu.gov.cn/vec_c/wmts?tk=" + webKey,
      //     layer: 'vec',
      //     matrixSet: 'c',
      //     format: 'tiles',
      //     style: 'default',
      //     projection: projection,
      //     tileGrid: new WMTSTileGrid({
      //       origin: olExtent.getTopLeft(projectionExtent),
      //       resolutions: resolutions,
      //       matrixIds: matrixIds
      //     }),
      //     wrapX: false
      //   })
      // });
      // var tdtbqLayer = new TileLayer({
      //   opacity: 1,
      //   source: new WMTS({
      //     url: "http://t0.tianditu.gov.cn/cva_c/wmts?tk=" + webKey,
      //     layer: 'cva',
      //     matrixSet: 'c',
      //     format: 'tiles',
      //     style: 'default',
      //     projection: projection,
      //     tileGrid: new WMTSTileGrid({
      //       origin: olExtent.getTopLeft(projectionExtent),
      //       extent: [-180.0, -90.0, 180.0, 90.0],
      //       resolutions: resolutions,
      //       matrixIds: matrixIds
      //     }),
      //     wrapX: false
      //   })
      // });
      map.addLayer(tdtslLayer);
      map.addLayer(tdtbqLayer);
      var xjSource = new VectorSource({
        //  url: 'http://localhost:8081/xj.json',
        //  url: 'http://10.16.11.240:15487/xj.json',
        //  url: 'http://10.226.77.11:8081/xj.json',
        url: './xj.json',
        format: new GeoJSON(),
        wrapX: false
      });
      var xjLayer = new VectorLayer({
        source: xjSource,
        style: new Style({
          stroke: new Stroke({
            //color: '#0033ff',
            color: 'rgb(128, 0 ,128)',
            width: 3
          }),
          fill: new Fill({
            color: 'rgba(128, 0 ,128, 0.01)'
          })
        })
      });
      var shiSource = new VectorSource({
        wrapX: false
      });
      var shiLayer = new VectorLayer({
        source: shiSource,
      });
      // const {data:result}= await this.$http.get('http://localhost:8081/shi.json')
      //  const {data:result}= await this.$http.get('http://10.16.11.240:15487/shi.json')
     // const {data:result}= await this.$http.get('http://10.226.77.11:8081/shi.json')
      const {data:result}= await this.$http1.get('./shi.json')
      for(let i = 0; i < result.length; i++) {
        var shifea1 = new Feature({
          geometry: new Point([result[i].经度, result[i].纬度]),
          name: result[i].标准名
        });
        shifea1.setStyle(createShiStyle(shifea1));
        shiSource.addFeature(shifea1);
      }
      map.addLayer(xjLayer);
      map.addLayer(shiLayer);
      var jianceLayer = new TileLayer({
        source: new TileSuperMapRest({
          url: this.jianceurl,
          wrapX: false
        }),
        projection: 'EPSG:4326'
      });
      map.addLayer(jianceLayer);
      // var jianceSource = new VectorSource({
      //   wrapX: false
      // });
      // var jianceLayer = new VectorLayer({
      //   source: jianceSource,
      // });
      // var jianceSource2 = new VectorSource({
      //   wrapX: false
      // });
      // var jianceLayer2 = new VectorLayer({
      //   source: jianceSource2,
      // });
      //     const {data:resultjc}= await this.$http.get('http://localhost:8081/jcpm.json');
      //  const {data:resultjc}= await this.$http.get('http://10.16.11.240:15487/jcpm.json');
     // const {data:resultjc}= await this.$http.get('http://10.226.77.11:8081/jcpm.json');
      // const {data:resultjc}= await this.$http1.get('./jcpm.json');
      // this.jcdata=resultjc;
      // for(let i = 0; i < this.jcdata.length; i++) {
      //   var jcfea = new Feature({
      //     geometry: new Point([this.jcdata[i].经度, this.jcdata[i].纬度]),
      //     name: this.jcdata[i].标准名,
      //     zhudi:this.jcdata[i].驻地,
      //   });
      //   var jcfea2 = new Feature({
      //     geometry: new Point([this.jcdata[i].经度, this.jcdata[i].纬度]),
      //     name: this.jcdata[i].标准名,
      //     zhudi:this.jcdata[i].驻地,
      //   });
      //   jcfea.setStyle(createJianceStyle(jcfea));
      //   jcfea2.setStyle(createJianceStyle2(jcfea2));
      //   jianceSource.addFeature(jcfea);
      //   jianceSource2.addFeature(jcfea2);
      // }
      // map.addLayer(jianceLayer);
      // jianceLayer2.setVisible(false);
      // map.addLayer(jianceLayer2);
      // map.getView().on('change:resolution', function() {
      //   if(map.getView().getZoom() < 10) {
      //     jianceLayer2.setVisible(false);
      //   }
      //   if(map.getView().getZoom() >= 10 ) {
      //     jianceLayer2.setVisible(true);
      //   }
      // });
      popO = new Overlay({
        element: document.getElementById('popupjc'),
        autoPan: true,
        autoPanAnimation: {
          duration: 250
        },
        offset: [0, -20]
      });
      map.on('click',evt=> {
        var coordinate = evt.coordinate;
        var point = new Point(evt.coordinate);
        var param = new QueryByDistanceParameters({
            queryParams: { name: "jiance@gexinghua" },
            distance: 0.1,
            geometry: point
          });
          new QueryService(this.jianceurl).queryByDistance(param, (serviceResult) => {
            if (serviceResult.result.totalCount == 0) {
              return;
            }
            this.jiancedata = serviceResult.result.recordsets[0].features.features[0].properties
            this.popxy = true
            map.addOverlay(popO);
            popO.setPosition(coordinate);
          });
          console.log(evt.coordinate)
         
        // var zt = 0;
        // var coordinate = evt.coordinate;
        // //var dpoint=new geoPoint(evt.coordinate);
        // map.forEachFeatureAtPixel(evt.pixel, async (cxfeature, layerVetor) => {
        //   zt++;
        //   if(zt!=1){
        //     return;
        //   }
        //   if(layerVetor == jianceLayer) {
        //     console.log(cxfeature)
        //     const {data:res}= await this.$http5.get('/querys/aqi_details.json',{ params:{ city:cxfeature.values_.zhudi,token:'5j1znBVAsnSf5xQyNQyq' } })
        //     for(let x in res){
        //       console.log(cxfeature.values_.name.substring(cxfeature.values_.name.indexOf("-")+1,cxfeature.values_.name.length))
        //       if(cxfeature.values_.name.substring(cxfeature.values_.name.indexOf("-")+1,cxfeature.values_.name.length)==res[x].position_name){
        //         this.popdata.quality = res[x].quality;
        //         this.popdata.pm2_5=res[x].pm2_5;
        //         this.popdata.o3=res[x].o3;
        //         this.popdata.co=res[x].co;
        //         this.popdata.pm10=res[x].pm10;
        //         this.popdata.no2=res[x].no2;
        //         this.popdata.so2=res[x].so2;
        //         this.popdata.aqi=res[x].aqi;
        //         this.popdata.area=res[x].area;
        //         this.popdata.position_name=res[x].position_name;
        //         this.popxy=true;
        //         map.addOverlay(popO);
        //         popO.setPosition(coordinate);
        //         map.getView().setCenter(coordinate);
        //         var jcolor='';
        //         if(this.popdata.aqi<50){
        //           jcolor='#43CE17'
        //         }else if(this.popdata.aqi<100){
        //           jcolor='#EFDC31'
        //         }else if(this.popdata.aqi<150){
        //           jcolor='#FFAA00'
        //         }else if(this.popdata.aqi<200){
        //           jcolor='#FF401A'
        //         }else if(this.popdata.aqi<300){
        //           jcolor='#D20040'
        //         }else if(this.popdata.aqi>=300){
        //           jcolor='#9C0A4E'
        //         }
        //         console.log(document.getElementById('aqi'))
        //         document.getElementById('aqi').style.background=jcolor;
        //         var jcolor1='';
        //         if(this.popdata.pm2_5<50){
        //           jcolor1='#43CE17'
        //         }else if(this.popdata.pm2_5<100){
        //           jcolor1='#EFDC31'
        //         }else if(this.popdata.pm2_5<150){
        //           jcolor1='#FFAA00'
        //         }else if(this.popdata.pm2_5<200){
        //           jcolor1='#FF401A'
        //         }else if(this.popdata.pm2_5<300){
        //           jcolor1='#D20040'
        //         }else if(this.popdata.pm2_5>=300){
        //           jcolor1='#9C0A4E'
        //         }
        //         console.log(jcolor)
        //         document.getElementById('pm2_5').style.background=jcolor1;
        //         var jcolor2='';
        //         if(this.popdata.aqi<50){
        //           jcolor2='#43CE17'
        //         }else if(this.popdata.aqi<150){
        //           jcolor2='#FFAA00'
        //         }else if(this.popdata.aqi>=150){
        //           jcolor2='#D20040'
        //         }
        //         console.log(jcolor)
        //         document.getElementById('pm10').style.background=jcolor2;


        //       }
        //     }
        //   }
        // })
      })
    },
    closePop(){
      this.popxy=false;
    },
  }
}
</script>

<style scoped lang="scss">
#shouye{
  position: absolute;
  top: 9.5%;
  bottom: 1%;
  left: 1%;
  right: 1%;
  //text-align: center;
  /*background: red;*/
}
#top{
  position: absolute;
  top: 0;
  height: 10%;
  width: 90%;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 5px #acc4fe;
  padding-left: 5%;
  padding-right: 5%;
  //>div{
  //  position: absolute;
  //  width: 10%;
  //  height: 100%;
  //  background-color: red;
  //  margin-left: 5%;
  //  display: inline-block;
  //}
}
.mutiDiv{
  position: absolute;
  width: 20%;
  height: 100%;
  text-align: center;
}
#centerLeft{
  position: absolute;
  top: 11.5%;
  height: 49%;
  width: 66%;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 5px #acc4fe;
  overflow: hidden;
  .title2{
    position: absolute;
    height: 15%;
    width: 100%;
    //background-color: red;
    border-bottom: 1px  #acc4fe solid;

  }
  .content2{
    position: absolute;
    top: 16%;
    height: 84%;
    width: 100%;
    //padding: 1%;
    .contentToLeft{
       position: absolute;
       width:48%;
       height: 100%;
       //background-color: #0baf8a;
       #pieNumberLeft{
            position: absolute;
            padding: 2%;
            width: 40%;
            height: 84%;
            top: 10%;
            //background-color: #0baf8a;
       }
      #wordsLeft{
            position: absolute;
            padding: 2%;
            left: 45%;
            width: 50%;
            height: 84%;
            top: 10%;
            //background-color: #0f1111;
      }
    }
    .contentToRight{
       position: absolute;
       left: 48%;
       width: 50%;
       height: 100%;
       //background-color: #8b7233;
      #pieNumberRight{
        position: absolute;
        padding: 2%;
        width: 40%;
        height: 84%;
        top: 10%;
        //background-color: #0baf8a;
      }
      #wordsRight{
        position: absolute;
        padding: 2%;
        left: 45%;
        width: 50%;
        height: 84%;
        top: 10%;
        //background-color: #0f1111;
      }
    }
  }
}
#map{
  position: absolute;
  top: 11.5%;
  height: 49%;
  width: 33%;
  left: 67%;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 5px #acc4fe;
  overflow: hidden;
}
#centerRight{
  position: absolute;
  top: 11.5%;
  height: 49%;
  width: 33%;
  left: 67%;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 5px #acc4fe;
  overflow: hidden;
  .title2{
    position: absolute;
    height: 15%;
    width: 100%;
    //background-color: red;
    border-bottom: 1px  #acc4fe solid;
  }
  .content2{
    position: absolute;
    top: 16%;
    height: 84%;
    width: 100%;
    //padding: 1%;
    //background-color: #3d3d3d;
  }
}
.title{
  position: absolute;
  top: 20%;
  height: 30%;
  text-align: center;
  width: 100%;
  //background-color: red;
  display:table-cell; vertical-align:middle;
  span{
    color: #686f6d;
    font-size: 16px;
  }
}
.content{
  position: absolute;
  bottom: 20%;
  height: 30%;
  text-align: center;
  width: 100%;
  //background-color: red;
  display:table-cell; vertical-align:middle;
  .units{
    color: #686f6d;
    font-size: 14px;
    margin-left: 5px;
  }
  .dyNumber{
    color: #45524f;
    font-size: 20px;
    font-weight: bold;
  }
}
//#footLeft{
//  top: 60%;
//  position: absolute;
//  bottom: 0;
//  width: 34%;
//  background-color: #fff;
//  border-radius: 8px;
//  box-shadow: 0 0 5px #acc4fe;
//  overflow: hidden;
//  .title2{
//    position: absolute;
//    height: 15%;
//    width: 100%;
//    //background-color: red;
//    border-bottom: 1px  #acc4fe solid;
//  }
//  .content2{
//    position: absolute;
//    top: 16%;
//    height: 84%;
//    width: 100%;
//    //padding: 1%;
//    background-color: #3d3d3d;
//  }
//}
#footRight{
  top: 62%;
  position: absolute;
  bottom: 0;
  //left: 35%;
  width: 100%;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 5px #acc4fe;
  overflow: hidden;
  .title2{
    position: absolute;
    height: 15%;
    width: 100%;
    //background-color: red;
    border-bottom: 1px  #acc4fe solid;
  }
  .content2{
    position: absolute;
    top: 1%;
    padding: 1%;
    height: 98%;
    width: 98%;
    //padding: 1%;
    //background-color: #3d3d3d;
  }
}
::v-deep .el-select{
  display: inline-block;
  position: absolute;
  left: 2%;
  padding: 24px;

.el-input__inner {
    border-radius: 45px;
  }
  .el-input{
     width: 80%;
  }
}
::v-deep .el-button{
  display: inline-block;
  position: absolute;
  left: 85%;
  padding: 11px;
  top: 11px;
}
::v-deep .el-button:focus, .el-button:hover {
  color: #fff;
  border-color: #c6e2ff;
  background: -webkit-linear-gradient(left,#3ee8c2,#25e4a3);
}
::v-deep .el-button--goon:active {
  color: #fff;
  border-color: #c6e2ff;
  outline: 0;
}
::v-deep .el-link.el-link--default:hover{
  color: #0ce999;
}
.ol-popup {
  z-index: 99999;
  position: absolute;
  background-color: white;
  width: 200px;
  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  padding: 18px;
  padding-bottom:5px;
  border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: 12px;
  left: -50px;
  min-width: 300px;
  /* background: rgba(59,88,119,1);
  color: #04F7F9;*/
  background: rgba(255,255,255,1);
  color: #000000;
}
.poptable{
  font-size: 12px;
  font-family: "\5FAE\8F6F\96C5\9ED1";
  background-color: transparent;
  text-align: center;
}
.poptable tr td,.poptable tr th{
  line-height: 30px;
  font-size: 12px;
  padding: 0 5px;
}
.ol-popup:after,
.ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;

}
.ol-popup:after {
  border-top-color: rgba(255,255,255,1);
  border-width: 10px;
  left: 48px;
  margin-left: -10px;
}

.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 48px;
  margin-left: -11px;
}
.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}

.ol-popup-closer:after {
  content: "888";
}

.popx {
  position: absolute;
  top: 0;
  right: 0;
  padding: 4px 4px 0 0;
  text-align: center;
  width: 18px;
  height: 14px;
  font: 16px/14px Tahoma, Verdana, sans-serif;
  color: #c3c3c3;
  text-decoration: none;
  font-weight: bold;
  background: transparent;
}
</style>
